<template>
  <div class="home">
    <div class="control-panel">
      <div class="add-form">123
        <h3>添加新成员</h3>
        <input v-model="newPerson.name" placeholder="姓名" class="input-field">
        <input v-model.number="newPerson.age" type="number" placeholder="年龄" class="input-field">
        <input v-model="newPerson.job" placeholder="职业" class="input-field">
        <button @click="addPerson" class="action-btn add-btn">添加</button>
      </div>

    </div>

    <transition-group name="list" tag="ul" class="people-list">
      <li 
        v-for="person in peoArr" 
        :key="person.id"
        class="list-item"
      >
        <div class="info">
          <span class="name">{{ person.name }}</span>
          <span class="age">{{ person.age }}岁</span>
          <span class="job">{{ person.job }}</span>
        </div>
      </li>
    </transition-group>

    <button @click="go" class="action-btn walk-btn">走一走</button>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data() {
    return {
      newPerson: {
        name: '',
        age: null,
        job: ''
      },
      peoArr: [
        { id: 1, name: '帅哥', age: 25, job: '设计师' },
        { id: 2, name: '美女', age: 22, job: '摄影师' },
        { id: 3, name: '程序员', age: 28, job: '开发工程师' }
      ],
      nextId: 4
    }
  },
  methods: {
    addPerson() {
      if (this.newPerson.name && this.newPerson.age && this.newPerson.job) {
        this.peoArr.push({
          id: this.nextId++,
          ...this.newPerson
        })
        this.newPerson = { name: '', age: null, job: '' }
      }
    },
    go() {
      if (this.peoArr.length > 0) {
        const first = this.peoArr.shift()
        this.peoArr.push(first)
      }
    }
  }
}
</script>

<style scoped>
.home {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

.control-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.add-form {
  background: #f5f5f5;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.input-field {
  display: block;
  width: 100%;
  padding: 0.5rem;
  margin: 0.5rem 0;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.action-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
}

.action-btn:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.add-btn { background-color: #4CAF50; color: white; }
.sort-btn { background-color: #2196F3; color: white; }
.shuffle-btn { background-color: #9C27B0; color: white; }
.walk-btn { background-color: #FF9800; color: white; margin-top: 1rem; }
.delete-btn { 
  background-color: #ff4444;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  padding: 0;
}

.stats {
  margin: 1rem 0;
  font-weight: bold;
  color: #666;
}

.people-list {
  list-style: none;
  padding: 0;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  margin: 0.5rem 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.3s;
}

.list-item:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.info {
  display: flex;
  gap: 1rem;
}

.name {
  font-weight: bold;
  color: #333;
}

.age {
  color: #666;
}

.job {
  color: #999;
  font-style: italic;
}

/* 过渡动画 */
.list-enter-active, .list-leave-active {
  transition: all 0.5s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
